@import './variable'; 
// reset
* {
    // 盒模型
    box-sizing: border-box;
    // 取消tab高亮
    outline: none;
}
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f1f1f1;
    // 字体平滑
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html {
    font-size: 13px;
}
a {
    text-decoration: none;
    color: #999
}
p {
    line-height: 1.5rem;
}
h2 {
    margin: 0;
}
// 字体颜色 背景颜色
// 第一个参数是一个变量 相当于for循环中的key
// 第二个参数是key对应的值
// 第三个参数是需要遍历的集合
@each $colorKey, $color in $colors {
    // .text-primary: #db9e3f
    // .text-white: white
    .text-#{$colorKey}{
        color: $color;
    }
    .bg-#{$colorKey}{
        background-color: $color;
    }
};
// 字体大小
@each $fonsizeKey, $fontsize in $font-sizes {
    .fs-#{$fonsizeKey}{
        font-size: $fontsize * $base-font-size
    }
}
// 字体对齐方式 text-align: center
@each $var in (left, center, right) {
    .text-#{$var}{
        text-align: $var;
    }
}
// flex
.d-flex {
    display: flex;
}
.flex-column{
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-1 {
    flex: 1;
}
// jc-center {justify-content:center}
@each $jcKey, $jcVal in $flex-jc {
    .jc-#{$jcKey}{
        justify-content: $jcVal;
    }
}
@each $aiKey, $aiVal in $flex-ai {
    .ai-#{$aiKey}{
        align-items: $aiVal;
    }
}
// spacing
$spacing-base-size: 1rem;
$spacing-types:(
    m: margin,
    p: padding
);
@each $type, $typeVal in $spacing-types {
    @each $size, $sizeVal in $spacing-sizes {
        // m-0 {margin:0}
        .#{$type}-#{$size}{
            #{$typeVal} : $sizeVal * $spacing-base-size;
        }
        // mx-1 {margin-left:0.25rem, margin-right:0.25rem}
        .#{$type}x-#{$size}{
            #{$typeVal}-left: $sizeVal * $spacing-base-size;
            #{$typeVal}-right: $sizeVal * $spacing-base-size;
        }
        .#{$type}y-#{$size}{
            #{$typeVal}-top: $sizeVal * $spacing-base-size;
            #{$typeVal}-bottom: $sizeVal * $spacing-base-size;
        }
        @each $direc, $direcVal in $spacing-directions {
            // mt-1: {margin-top: 0.25rem}
            .#{$type}#{$direc}-#{$size}{
                #{$typeVal}-#{$direcVal}: $sizeVal * $spacing-base-size;
            }
        }
    }
}

// button
.btn {
    display: flex;
    border: none;
    border-radius: 0.2rem;
    padding: 0.2rem 0.6rem;
    justify-content: center;
    align-items: center;
    font-size: map-get($font-sizes, 's') * $base-font-size;
    &.btn-lg {
        border: 1px solid map-get($colors, 'gray-1');
        padding: 0.5rem 1rem ;
    }
}
.nav {
    display: flex;
    .nav-item {
        border-bottom: 0.2308rem solid transparent;
        padding-bottom: 0.1538rem;
        &.active {
            color: map-get($colors , 'primary');
            border-bottom: 0.2308rem solid map-get($colors , 'primary');
        }
    &.active-inverse {
        border-bottom: 0.2308rem solid map-get($colors , 'white');
    }
    }
}
.w-100 {
    width: 100%;
}
.h-100 {
    height: 100%;
}

// 设置精灵图
.navicon{
    .icon-item{
    width: 25%;
    border-right: 1px solid #d4d9de;
    &:nth-child(4n){
        border: none;
    }
}
}
.sprite{
    background: url('../images/sprite.png') no-repeat 0 0;
    display: inline-block;
    background-size: 28.8462rem;
    &.sprite-news {
        width: 1.7692rem;
        height: 1.5385rem;
        background-position: 90.483% 15.614%;
    }
    &.sprite-arrow {
        width: 0.7692rem;
        height: 0.7692rem;
        background-position: 38.577% 52.076%;
    }
}

// border样式
@each $var in (top, right, bottom, left) {
    .border-#{$var}{
        border-#{$var} : 1px solid map-get($colors, 'light-1')
    }
}



